<template>
  <div class="rightbox" v-cloak>
    <h1>参数列表</h1>
    <el-row  style="width: 96%;margin:2%">
      <el-col :span="3">
        <el-input v-model="name"  placeholder="输入用户名"></el-input>
      </el-col>
      <el-col :span="3" style="margin-left:10px;">
        <el-select v-model="paramindex"  placeholder="请选择所属类别">
          <el-option
            v-for="item in paramList"
            :key="item.paramList"
            :label="item.name"
            :value="item.paramindex">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3" style="margin-left:10px;">
        <el-select v-model="state" clearable placeholder="状态">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="-1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="1" style="margin-left:20px;">
        <el-button type="primary" @click="Search">查询</el-button>
      </el-col>
    </el-row>
    <el-table
    :data="dataList"
    border
    style="width: 96%;margin:2%">
      <el-table-column
        prop="name"
        label="参数名称">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state == -1">禁用</span>
          <span v-if="scope.row.state == 1">启用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="Modify(scope)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      paramindex: '',
      paramList: [],
      dataList: [],
      name: '',
      state: '1'
    }
  },
  methods: {
    getData: function () {
      var that = this
      that.$axios.request('post', '/Param/Index', {
        superior: 0
      })
        .then((res) => {
          if (res.code === 0) {
            that.paramList = res.data
          }
        })
    },
    Search: function () {
      var that = this
      that.getList()
    },
    getList: function () {
      var that = this
      that.$axios.request('post', '/Param/Index', {
        name: that.name,
        state: that.state,
        superior: that.paramindex,
        pagelimit: that.pagelimit,
        pageindex: that.pageindex
      })
        .then((res) => {
          if (res.code === 0) {
            that.dataList = res.data
            that.total = res.data.total
          }
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    },
    Modify: function (scope) {
      var that = this
      that.$router.push({
        name: 'paramModify',
        params: {
          paramindex: scope.row.paramindex
        }
      })
    }
  },
  mounted () {
    this.getData()
    // this.getList()
  }
}
</script>
